<template>
    <div class="home-container">
        <!-- 导航栏 -->
        <van-nav-bar class="app-nav-bar">
            <van-button 
            type="info" 
            slot="title" 
            icon="search"
            round
            class="search-btn"
            to='/search'
            >
                搜索
            </van-button>
        </van-nav-bar>
        <!-- /导航栏 -->

        <!-- 文章频道列表 -->
        <van-tabs v-model="active" class="channel-tabs">

            <!-- 面包按钮 -->
            <div slot="nav-right" class="wap-nav-wrap" @click="show=true">
                <van-icon name="wap-nav" />
            </div>
            <div slot="nav-right" class="wap-nav-placeholder"></div>
            <!-- /面包按钮 -->

            <van-tab class="tab-item" v-for="item in channels" :key="item.id" :title="item.name">
                <!-- 文章列表显示 -->
                <ArticleList :channels="item"/>
                <!-- /文章列表显示 -->
            </van-tab>
            
        </van-tabs>
        <!-- /文章频道列表 -->


        <!-- 频道加减 -->
        <van-popup 
            v-model="show" 
            position="bottom" 
            class="channel-edit-popup"
            closeable
            get-container="body"
            close-icon-position="top-left"
        >
            <channel-edit @update-active="onUpdateActive" :active="active" @close="show = false" :user-channel="channels"/>
        </van-popup>
        <!-- /频道加减 -->
    </div>
</template>
<script>
import { mapState } from 'vuex'
import { getUserChannels } from '@/api/user'
import channelEdit from './component/channel-edit.vue'
import ArticleList from './component/article-list'
import { getItem } from '@/utils/storage'
export default {
    data() {
        return {
            active:0,
            channels:[],
            show:false
        }
    },
    methods: {
        async loadChannels(){
            
            const { data } = await getUserChannels()
            //console.log(data)
            if(getItem('user-channels')){
                this.channels = getItem('user-channels')
            }else{
                this.channels = data.data.channels
            }
        },
        onUpdateActive(index){
            this.active = index;
        }
    },
    created() {
        this.loadChannels()
    },
    components:{
        ArticleList,
        channelEdit
    },
    computed:{
        ...mapState['user']
    }
}
</script>
<style lang="less" scoped>
    /deep/.van-nav-bar__title{
        max-width: unset;
    }
    .search-btn{
        width: 277px;
        height: 32px;
        background: #5babfb;
        border: none;
        .van-icon{
            font-size: 16px;
        }
        .van-button__text{
            font-size: 14px;
        }
    }
    .channel-tabs{
        /deep/.van-tabs__line{
            width: 15px !important;
            height: 3px;
            background: #3296fa;
            bottom: 20px;
        }
        .wap-nav-wrap{
            position: fixed;
            right: 0;
            height: 43px;
            line-height: 44px;
            background: #fff;
            opacity: .9;
            width: 33px;
            justify-content: center;
            align-items: center;
            margin-top: 5px;
            .van-icon{
                font-size: 24px;
            }
        }
        
    }
    .channel-edit-popup{
        height: 100%;
    }
    .wap-nav-placeholder{
        width: 43px;
        flex-shrink: 0;
    }
    
</style>